<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //增加prop属性 可以存储在标签中，
                //这个值不会通过属性的方式显示给用户
                //我理解是存储
                //$("thead tr td:eq(0)").data("prop","userId");
                //alert($("#userId").data("prop"));     
                
                //
                var props = initHeader();
                var users = getUsers(props);
                $(users).each(function(n) {
                    var str = "";
                    for(var i=0;i<props.length;i++) {
                        str+=this[props[i]]+",";
                    }
                    alert(str);
                });
//                function getUsers(props) {
//                    var users = new Array();
//                    $("tbody tr").each(function(n) {
//                        var user = new Object();
//                        $(this).find("td").each(function(tn){
//                            user[props[tn]] = $(this).html();
//                        });
//                        users.push(user);
//                    });
//                    return users;
//                }
                function getUsers(props) {
				var users = new Array();
				$("tbody tr").each(function(n){
					//不能基于字符串添加，只能基于对象添加
					var user = new Object();
					
					$(this).find("td").each(function(tn){
						user[props[tn]] = $(this).html();
					});
					users.push(user);
				});
				return users;
			}
                function initHeader(){
                    var props = $("thead td").map(function(n){
                        return $(this).attr("title");
                    }).get();
                    return props;
                }
            });
        </script>
    </head>
    <body>
        
        <table width="700" border="1" align="center" id="tus"></table>
        <table width="700" border="1" align="center" id="users">
            <thead>
                <tr>
                    <td title="id">用户标识</td>
                    <td title="username">用户姓名</td>
                    <td title="age">用户年龄</td>
                    <td title="password">用户密码</td>
                </tr>
            </thead>
            <tbody>
                <tr id="abc">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>33</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>13</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>45</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>朱琪</td>
                    <td>21</td>
                    <td>abc123</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
